/* 多附件 */
<template>
  <div class="files-config">
    <je-form-item label="允许上传类型" name="allow">
      <je-input v-model:value="formState.allow" placeholder="如：jpg,gif(空代表不限制)" />
    </je-form-item>

    <je-form-item label="禁止上传类型" name="notallow">
      <je-input v-model:value="formState.notallow" placeholder="如：jpg,gif(空代表不禁止)" />
    </je-form-item>

    <je-form-item label="上传文件大小" name="fileSize">
      <je-input-number
        v-model:value="formState.fileSize"
        addon-after="M"
        style="width: 100%"
        :min="0"
      />
    </je-form-item>

    <div
      style="
        width: 100%;
        display: flex;
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
        border-left: 1px solid #d9d9d9;
      "
    >
      <span
        v-for="(limitItem, index) in filesLimits"
        :key="limitItem.code"
        :class="[limitItem.active ? 'filesActive' : '']"
        style="
          border-right: 1px solid #d9d9d9;
          display: block;
          width: 20%;
          text-align: center;
          padding: 5px 0;
          cursor: pointer;
        "
        @click="changeFilesActive(limitItem, index)"
        >{{ limitItem.text }}</span
      >
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch, ref } from 'vue';
  import { Form, Input, InputNumber } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';

  export default defineComponent({
    name: 'FilesConfig',
    components: {
      JeFormItem: Form.Item,
      JeInput: Input,
      JeInputNumber: InputNumber,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        allow: config.allow || '', //允许上传类型
        notallow: config.notallow || '', //禁止上传类型
        fileSize: config.fileSize || '', //上传文件大小
        showButtons: config.showButtons || '',
      });
      const filesLimits = ref([
        {
          code: 'preview',
          text: '预览',
          active:
            formState.showButtons != '' ? formState.showButtons.indexOf('preview') != -1 : true,
        },
        {
          code: 'downLoad',
          text: '下载',
          active:
            formState.showButtons != '' ? formState.showButtons.indexOf('downLoad') != -1 : true,
        },
        {
          code: 'remove',
          text: '删除',
          active:
            formState.showButtons != '' ? formState.showButtons.indexOf('remove') != -1 : true,
        },
        {
          code: 'rName',
          text: '重命名',
          active: formState.showButtons != '' ? formState.showButtons.indexOf('rName') != -1 : true,
        },
        {
          code: 'property',
          text: '属性',
          active:
            formState.showButtons != '' ? formState.showButtons.indexOf('property') != -1 : true,
        },
      ]);

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //点击按钮触发
      const changeFilesActive = (item, index) => {
        const showButtons = [];
        filesLimits.value[index].active = !item.active;
        filesLimits.value.forEach((rec) => {
          if (rec.active) {
            showButtons.push(rec.code);
          }
        });
        //给表单赋值
        formState.showButtons = showButtons.join(',');
      };

      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      return { formState, filesLimits, changeFilesActive };
    },
  });
</script>
<style lang="less" scoped>
  .files-config {
    .filesActive {
      background: #eaf4fe !important;
      color: #3265f5 !important;
    }
  }
</style>
